<template>
  <view class="main">
    <view class="header">
      <view class="header-info" style="margin-top: 20px;" @click="loginOrJump('/pages/profile/profile')">
        <view>
          <view class="flex-start">
            <view style="font-size: 24px;font-weight: bold;margin-right: 15px;">{{userInfo.studentName||userInfo.teacherName}}</view>
            <view class="flex-start">
              <u-icon name="man" color="#43C0E8" v-if="userInfo.studentSex==1||userInfo.teacherSex==1"></u-icon>
              <u-icon name="man" color="#ff7bad" v-else></u-icon>
              {{userInfo.studentSex==1||userInfo.teacherSex==1?'男':'女'}}
            </view>
          </view>
          <view class="flex-start" style="margin-top: 10px;">
            <u-icon name="../../static/images/user/yanjiushengxueyuan.png" color="#C4AD8C"></u-icon><text
              style="margin-left: 5px;color:#C4AD8C">{{userInfo.college||userInfo.collegeName}}</text> · {{userInfo.major||userInfo.post}}
          </view>
        </view>
        <view>
          <image :src="userInfo.headImage||'../../static/images/user/scancode.png'" style="width:60px;height:60px;border-radius: 50%;" mode="">
          </image>
        </view>
      </view>

      <view style="margin-top: 30px;">
        <view style="font-size: 16px;font-weight: bold;">常用功能</view>
        <view style="display: flex;justify-content: space-around;margin-top: 20px;">
          <view style="display: flex;flex-direction: column;align-items: center;justify-content: center;"
            v-for="(e,i) in statList" :key="i">
            <view @click="loginOrJump(e.url)">
              <u-icon :name="e.icon" color="#C4AD8C" size="36"></u-icon>

              <!-- <image :src="e.icon" style="width:36px;height: 36px;"></image> -->
            </view>
            <view style="font-size: 13px;font-family: PingFang SC-Regular, PingFang SC;">{{e.title}}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="notice">
      <view class="bar"
        style="display: flex;justify-content: space-between;align-items: center;padding:20px;border-bottom: 1px solid #EAEAEB;">
        <view class="flex-start">
          <u-icon name="clock"></u-icon>
          <view style="margin:0 5px">消息通知</view>
          <view style="color:#999999;font-size: 13px;">(1条未读通知)</view>
        </view>
        <view style="color: #C4AD8C;">查看更多</view>
      </view>

      <view class="class-item" style="border-bottom: 1px solid #EAEAEB;" v-for="i  in 2">
        <view style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
          <view
            style="font-size: 16px;font-weight: bold;display: flex;justify-content: flex-start;align-items: center;">
            <u-badge :isDot="true" type="error " max="99"  style="margin-right: 5px;"></u-badge>
            关于国庆节的放假通知
          </view>
          <view style="font-size: 12px;color: #999999;">2022/08/22 17:52</view>
        </view>
        <view style="font-size: 13ox;color: #999999;">
          关于国庆节的放假通知内容内容内容内容内容内容，内容内容内容电化教育居然江湖规矩，内容过得舒服得很内容...
        </view>
      </view>

    </view>
    <!--    <view class="user-header">
      <view class="user-info" @click="loginOrJump('/pages/profile/profile')" style="display: flex;justify-content: flex-start;align-items: center;padding:10px;">
        <u-avatar size="80" :src="userInfo.avatar"></u-avatar>
        <view>
          <view>
             <text class="nick-name" style="margin:0 10px;">{{ hasLogin ? userInfo.nickname || '张三' : '登录/注册' }}</text>
             <text>男</text>
          </view>
          <view>
            <text style="margin:0 10px;">研究生院</text>
            <text>佛学通识专业</text>
          </view>

        </view>

      </view>
    </view>

    <u-gap height="10" bgColor="#f3f3f3"></u-gap>

    <view class="" style="padding: 10px;">
      <view style="display:flex;justify-content:flex-start; margin:10px 0"><u-icon name="account"></u-icon>个人资料</view>
      <view style="display:flex;justify-content:flex-start; margin:10px 0" @click="loginOrJump('cccc')"><u-icon name="grid"></u-icon>课程表</view>
      <view style="display:flex;justify-content:flex-start; margin:10px 0" @click="loginOrJump('/pages/user/attendance')"><u-icon name="calendar"></u-icon>考勤记录</view>
    </view>
    <u-gap height="10" bgColor="#f3f3f3"></u-gap>

    <view style="display: flex;justify-content: space-between;align-items: center;padding:10px">
      <view style="display:flex;justify-content:flex-start;align-items:center;"> <u-icon name="clock"></u-icon><text style="margin-left:5px;">消息通知</text></view>
      <view style="display:flex;justify-content:flex-end;align-items:center;" @click="loginOrJump('/pages/user/notice')">查看更多<u-icon name="arrow-right-double"></u-icon></view>
    </view>

    <view style="display: flex;justify-content: space-between;align-items: center;margin:10px;background-color: #f5f5f5;border-radius: 6px;padding:10px;" v-for="i in 3" :key="i">
      <view>
        <view style="margin:10px 0">放假通知</view>
        <view>2022-03-04 18:00</view>
      </view>
      <view>
        <image src="../../static/images/empty/comment.png" style="width: 90px;height: 50px;" mode=""></image>
      </view>
    </view> -->

    <view v-if="hasLogin" class="logout-btn">
      <u-button customStyle="background:#182044;color:#C4AD8C" text="退出登录" @click="logout"></u-button>
    </view>
    <u-gap height="80" bgColor="#F8FAFB"></u-gap>
  </view>
</template>

<script>
  import {mapState,mapGetters} from "vuex"
  import {getUserInfo} from "@/api/user.js"
  export default {
    data() {
      return {
        statList: [{
            value: '0',
            title: '课程表',
            icon: '../../static/images/user/kechengbiao.png',
            url: 'pages/user/timeTable'
          },
          {
            value: '0',
            title: '考勤打卡',
            icon: '../../static/images/user/kaoqindaka.png',
            url: '/pages/user/attendance'
          },
          {
            value: '0',
            title: '请假申请',
            icon: '../../static/images/user/qingjiashenqing.png',
            url: 'pages/user/apply'
          },
          {
            value: '0',
            title: '成绩管理',
            icon: '../../static/images/user/kaoshixinxi.png'
          },
          {
            value: '0',
            title: '考试信息',
            icon: '../../static/images/user/kaoshixinxi.png'
          },

        ],

      }
    },
    onLoad() {

    },
    onShow() {


      // let id = uni.getStorageSync('userId')
      // console.log('id',id)
      // getUserInfo({id}).then(res=>{
      //   // console.log(res)
      //   this.userInfo = res.data;
      // })
    },
    methods: {
      loginOrJump(pageUrl) {
        if (!this.hasLogin) {
          uni.$u.route('/pages/login/account')
        } else {
          uni.$u.route(pageUrl)
        }
      },
      logout() {
        uni.showModal({
          title: '提示',
          content: '您确定要退出登录吗',
          success: res => {
            if (res.confirm) {
              this.$store.dispatch('Logout')
            } else if (res.cancel) {
              //console.log('用户点击取消')
            }
          }
        })
      }
    },
    computed: {
      ...mapState(["userInfo","userType"]),
      ...mapGetters(["hasLogin"])
      // userInfo() {
      //   return this.$store.state.userInfo
      // },
      // hasLogin() {
      //   return this.$store.state.hasLogin
      // }
    }
  }
</script>

<style lang="scss" scoped>
  .flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .main {
    width: 100%;
    height: 100%;
    background-color: #F8FAFB;
  }

  .header {
    background-color: #fff;
    // margin:10px;
    padding: 10px;

    .header-info {
      display: flex;
      justify-content: space-between;
      align-items: center;


    }
  }

  .notice {
    background-color: #fff;
    margin-top: 10px;

    .class-item {
      padding: 20px 10px;
    }
  }

  // .user-header {
  //   @include flex-center(column);
  //   height: 280rpx;
  //   .user-info {
  //     @include flex-center(column);
  //     .nick-name {
  //       margin-top: 20rpx;
  //       font-size: 32rpx;
  //       font-weight: 700;
  //     }
  //   }
  // }

  .order-header {
    @include flex-space-between;
    padding: 20rpx 30rpx;
    border-bottom: $custom-border-style;

    .order-title {
      color: #333333;
      font-size: 34rpx;
    }

    .see-all {
      height: 40rpx;
      @include flex-right;
      color: #666666;
      font-size: 26rpx;
    }
  }

  .order-status-box {
    padding: 40rpx 0;
  }

  .stat-box {
    padding: 20rpx 0;
  }

  .grid-title {
    line-height: 50rpx;
    font-size: 26rpx;
  }

  .grid-value {
    line-height: 50rpx;
    font-size: 36rpx;
    font-weight: 700;
    color: #2b85e4;
  }

  .fun-list {
    .fun-item {
      padding-top: 10rpx;
      padding-bottom: 10rpx;
      border-bottom: $custom-border-style;
    }
  }

  .logout-btn {
    margin: 60rpx auto 0;
    width: 400rpx;
  }
</style>
